<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文件上传</title>

    <link rel="stylesheet" href="../res/layui/css/layui.css" media="all">

</head>

<body>

    <button type="button" class="layui-btn" id="selectImg">选择图片</button>
    <div class="layui-upload-list">
        <img id="preview" width="150px">
        <img id="thumbImagePath" width="150px">
        <img id="fullPath" width="150px">
        <div class="layui-progress layui-progress" lay-showpercent="true" lay-filter="demo" id="demo" style="display: none ;width: 450px;">
            <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
        </div>
        <p id="demoText"></p>
    </div>

</body>

</html>
<script src="../res/layui/layui.all.js"></script>
<script>
    layui.use('upload', function() {
        let server = 'http://localhost';
        var $ = layui.jquery,
            element = layui.element,
            upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#selectImg',
            url: server + '/upload',
            progress: function(n, elem) {
                $('#demo').css('display', 'block');
                var percent = n + '%' //获取进度百分比
                element.progress('demo', percent); //可配合 layui 进度条元素使用

                //以下系 layui 2.5.6 新增
                // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
            },
            // auto: false,
            multiple: false,
            before: function(obj) {
                $('#demoText').html('');
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#preview').attr('src', result); //图片链接（base64）
                });
            },
            // bindAction: '#uploadImg',
            done: function(res) {
                window.console.log(res);
                switch (res.code) {
                    case '200':
                        //上传成功
                        $('#thumbImagePath').attr('src', res.data.proxyFullUrl + res.data.thumbImagePath);
                        $('#fullPath').attr('src', res.data.proxyFullUrl + res.data.fullPath);
                        $('#demo').css('display', 'none');
                        break;

                    default:
                        //如果上传失败
                        break;
                }

            },
            error: function() {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            }
        });
    });
</script>